import React from 'react';
import { render as renderAmis } from 'amis';

class Card extends React.Component {
  render() {
    return renderAmis(
      {
        type: "page",
        title: "详情页1",  // 页面标题
        "regions": [
          "body"
        ],
        "body": [
          // 固定菜单
          {
            "type": "container",
            "body": [
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid",
                  "marginBottom": "20px"
                },
                "id": "u:b76cb4ea45b2",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "refresh"
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/c1KVGjw0/R.png"
              },
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid",
                  "marginBottom": "20px"
                },
                "id": "u:3fe40ddbc6be",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "url",
                        "args": {
                          "url": "/home",
                          "blank": false
                        }
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/bJPsfbFj/780.jpg"
              },
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid"
                },
                "id": "u:3aa82b01de1f",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "goBack"
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/W4kF1Czg/power-svgrepo-com.png"
              }
            ],
            "style": {
              "position": "fixed",
              "display": "flex",
              "flexWrap": "nowrap",
              "flexDirection": "column",
              "alignItems": "center",
              "overflowX": "visible",
              "width": "80px",
              "justifyContent": "center",
              "zIndex": 1,
              "inset": "auto 10px 10px auto"
            },
            "size": "none",
            "wrapperBody": false,
            "id": "u:74e24a3d423e",
            "isFixedHeight": false,
            "isFixedWidth": true,
            "stickyPosition": "auto",
            "originPosition": "right-bottom",
            "onEvent": {
              "click": {
                "weight": 0,
                "actions": []
              }
            }
          },
          // 内容上部
          {
            "type": "flex",
            "items": [
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:74a78b02d060",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "tpl",
                        "tpl": "同时读取社保卡、身份证、M1卡",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:edd5acb6e1f6",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "color": "var(--colors-neutral-fill-11)",
                              "fontSize": "var(--fonts-size-8)"
                            },
                            "padding-and-margin:default": {
                              "marginTop": "var(--sizes-size-2)",
                              "marginRight": "var(--sizes-size-2)",
                              "marginBottom": "var(--sizes-size-2)",
                              "marginLeft": "var(--sizes-size-2)"
                            }
                          }
                        }
                      },
                      {
                        "type": "tpl",
                        "tpl": "间隔时间以秒为单位",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:5759c949532a",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "color": "var(--colors-neutral-fill-11)",
                              "fontSize": "var(--fonts-size-8)"
                            },
                            "padding-and-margin:default": {
                              "marginTop": "var(--sizes-size-2)",
                              "marginRight": "var(--sizes-size-2)",
                              "marginBottom": "var(--sizes-size-2)",
                              "marginLeft": "var(--sizes-size-2)"
                            }
                          }
                        }
                      }
                    ],
                    "style": {
                      "position": "relative",
                      "display": "flex",
                      "inset": "auto",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "flex-start",
                      "flex": "0 0 auto",
                      "justifyContent": "center"
                    },
                    "size": "none",
                    "wrapperBody": false,
                    "id": "u:cf0f7d207e85",
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "themeCss": {
                      "baseControlClassName": {
                        "padding-and-margin:default": {
                          "paddingTop": "1.25rem",
                          "paddingRight": "6.25rem",
                          "paddingBottom": "var(--sizes-base-10)",
                          "paddingLeft": "6.25rem"
                        },
                        "background:default": "#409eff"
                      }
                    }
                  },
                  {
                    "type": "form",
                    "id": "u:15ba688c00ad",
                    "title": "",
                    "mode": "flex",
                    "labelAlign": "right",
                    "dsType": "api",
                    "feat": "Insert",
                    "body": [
                      {
                        "type": "input-text",
                        "label": "扇区",
                        "name": "section",
                        "id": "u:938030ab0f46",
                        "required": true,
                        "validations": {
                          "maxLength": 2,
                          "minLength": 2
                        },
                        "maxLength": 2,
                        "size": "lg",
                        "static": false,
                        "placeholder": "请设置扇区地址",
                        "value": "00",
                        "onEvent": {},
                        "row": 0,
                        "colSize": "3/4",
                        "labelAlign": "inherit"
                      },
                      {
                        "type": "input-text",
                        "label": "块地址",
                        "name": "block",
                        "id": "u:88d8f3fe59ec",
                        "required": true,
                        "validations": {
                          "maxLength": 2,
                          "minLength": 2
                        },
                        "size": "lg",
                        "placeholder": "请设置块地址",
                        "value": "00",
                        "validationErrors": {
                          "maxLength": "必填项，请输入两位数",
                          "minLength": "必填项，请输入两位数"
                        },
                        "row": 1,
                        "colSize": "3/4",
                        "maxLength": 2
                      },
                      {
                        "type": "input-text",
                        "label": "密钥",
                        "name": "key",
                        "id": "u:bdd7ca82b912",
                        "required": true,
                        "size": "lg",
                        "placeholder": "请设置密钥",
                        "value": "FFFFFFFFFFFF",
                        "validations": {
                          "maxLength": 12,
                          "minLength": 12
                        },
                        "validationErrors": {
                          "maxLength": "必填项，请输入12位字符",
                          "minLength": "必填项，请输入12位字符"
                        },
                        "row": 2,
                        "colSize": "3/4"
                      },
                      {
                        "type": "select",
                        "label": "读卡间隔",
                        "name": "select",
                        "options": [
                          {
                            "label": "10",
                            "value": "A"
                          },
                          {
                            "label": "15",
                            "value": "B"
                          },
                          {
                            "label": "20",
                            "value": "20"
                          }
                        ],
                        "id": "u:b0766b913f3e",
                        "multiple": false,
                        "mode": "horizontal",
                        "labelAlign": "right",
                        "size": "md",
                        "value": "A",
                        "themeCss": {
                          "labelClassName": {
                            "padding-and-margin:default": {
                              "marginTop": "var(--sizes-size-0)",
                              "marginBottom": "var(--sizes-size-0)"
                            }
                          },
                          "selectControlClassName": {
                            "padding-and-margin:default": {
                              "marginTop": "var(--sizes-size-0)",
                              "marginBottom": "var(--sizes-size-0)"
                            }
                          }
                        },
                        "row": 3,
                        "colSize": "2/3"
                      }
                    ],
                    "actions": [
                      {
                        "type": "container",
                        "body": [
                          {
                            "type": "button",
                            "label": "读卡一次",
                            "onEvent": {
                              "click": {
                                "actions": [
                                  {
                                    "componentId": "u:15ba688c00ad",
                                    "ignoreError": false,
                                    "outputVar": "submitResult",
                                    "actionType": "submit",
                                    "args": {}
                                  }
                                ]
                              }
                            },
                            "id": "u:f86d3d974ca4",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "持续读身份证25s",
                            "onEvent": {
                              "click": {
                                "actions": [
                                  {
                                    "componentId": "u:15ba688c00ad",
                                    "ignoreError": false,
                                    "outputVar": "submitResult",
                                    "actionType": "submit"
                                  }
                                ]
                              }
                            },
                            "id": "u:17ca993b8e2e",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "循环读卡",
                            "onEvent": {
                              "click": {
                                "actions": [
                                  {
                                    "componentId": "u:15ba688c00ad",
                                    "ignoreError": false,
                                    "outputVar": "submitResult",
                                    "actionType": "submit"
                                  }
                                ]
                              }
                            },
                            "id": "u:194c19edd613",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "中控读身份证",
                            "onEvent": {
                              "click": {
                                "actions": [
                                  {
                                    "componentId": "u:15ba688c00ad",
                                    "ignoreError": false,
                                    "outputVar": "submitResult",
                                    "actionType": "submit"
                                  }
                                ]
                              }
                            },
                            "id": "u:5dde4ff52370",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "中控读IC卡",
                            "onEvent": {
                              "click": {
                                "actions": [
                                  {
                                    "componentId": "u:15ba688c00ad",
                                    "ignoreError": false,
                                    "outputVar": "submitResult",
                                    "actionType": "submit"
                                  }
                                ]
                              }
                            },
                            "id": "u:fcd9c8b3ff5b",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "中控读卡",
                            "onEvent": {
                              "click": {
                                "actions": [
                                  {
                                    "componentId": "u:15ba688c00ad",
                                    "ignoreError": false,
                                    "outputVar": "submitResult",
                                    "actionType": "submit"
                                  }
                                ]
                              }
                            },
                            "id": "u:69884e04f090",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          }
                        ],
                        "style": {
                          "position": "relative",
                          "display": "flex",
                          "inset": "auto",
                          "flexWrap": "wrap",
                          "flexDirection": "row",
                          "alignItems": "center",
                          "flex": "0 0 auto",
                          "justifyContent": "center",
                          "maxWidth": "400px",
                          "overflowX": "visible"
                        },
                        "size": "none",
                        "wrapperBody": false,
                        "id": "u:3e9182b5f2d3",
                        "isFixedWidth": false,
                        "isFixedHeight": false,
                        "themeCss": {
                          "baseControlClassName": {
                            "border:default": {
                              "top-border-style": "var(--borders-style-1)",
                              "left-border-style": "var(--borders-style-1)",
                              "right-border-style": "var(--borders-style-1)",
                              "bottom-border-style": "var(--borders-style-1)"
                            },
                            "padding-and-margin:default": {
                              "paddingLeft": "var(--sizes-size-0)",
                              "marginLeft": "var(--sizes-base-30)"
                            }
                          }
                        }
                      }
                    ],
                    "resetAfterSubmit": false,
                    "loadingConfig": {
                      "show": true
                    },
                    "wrapWithPanel": true,
                    "debug": false,
                    "themeCss": {
                      "panelClassName": {
                        "border:default": {
                          "top-border-style": "var(--borders-style-1)",
                          "left-border-style": "var(--borders-style-1)",
                          "right-border-style": "var(--borders-style-1)",
                          "bottom-border-style": "var(--borders-style-1)",
                          "left-border-color": "transparent"
                        },
                        "padding-and-margin:default": {}
                      },
                      "bodyControlClassName": {
                        "padding-and-margin:default": {
                          "paddingLeft": "var(--sizes-base-50)"
                        }
                      },
                      "headerControlClassName": {
                        "padding-and-margin:default": {
                          "paddingLeft": "var(--sizes-size-0)"
                        },
                        "border:default": {
                          "top-border-color": "transparent",
                          "left-border-color": "transparent",
                          "right-border-color": "transparent",
                          "bottom-border-color": "transparent",
                          "top-border-style": "var(--borders-style-1)",
                          "left-border-style": "var(--borders-style-1)",
                          "right-border-style": "var(--borders-style-1)",
                          "bottom-border-style": "var(--borders-style-1)"
                        }
                      },
                      "itemClassName": {
                        "padding-and-margin": {
                          "marginLeft": "var(--sizes-size-0)"
                        }
                      },
                      "actionsControlClassName": {
                        "border:default": {
                          "top-border-color": "transparent",
                          "left-border-color": "transparent",
                          "right-border-color": "transparent",
                          "bottom-border-color": "transparent",
                          "top-border-style": "var(--borders-style-1)",
                          "left-border-style": "var(--borders-style-1)",
                          "right-border-style": "var(--borders-style-1)",
                          "bottom-border-style": "var(--borders-style-1)"
                        }
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "flex",
                  "flex": "1 1 auto",
                  "flexGrow": 2,
                  "flexBasis": "0px",
                  "flexWrap": "nowrap",
                  "justifyContent": "flex-start",
                  "flexDirection": "column",
                  "alignItems": "center"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:8c32cfed728f",
                "themeCss": {
                  "baseControlClassName": {
                    "padding-and-margin:default": {
                      "paddingTop": "1.375rem",
                      "paddingRight": "1.375rem",
                      "paddingBottom": "1.375rem",
                      "paddingLeft": "1.375rem"
                    },
                    "background:default": "var(--colors-neutral-fill-11)"
                  }
                }
              },
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:74a78b02d060",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              }
            ],
            "style": {
              "position": "relative",
              "rowGap": "10px",
              "columnGap": "10px",
              "flexWrap": "nowrap",
              "inset": "auto",
              "height": "70%",
              "overflowY": "visible"
            },
            "id": "u:205d6083d1e2",
            "isFixedHeight": true,
            "isFixedWidth": false
          },
          // 底部
          {
            "type": "flex",
            "items": [
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:72f96b238b2b",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "tpl",
                    "tpl": "暂不支持测试页面配置串口，使用多媒体配置文件进行配置",
                    "inline": true,
                    "wrapperComponent": "",
                    "id": "u:98862254c584",
                    "themeCss": {
                      "baseControlClassName": {
                        "font:default": {
                          "color": "var(--colors-neutral-text-2)",
                          "fontSize": "var(--fonts-size-7)"
                        },
                        "padding-and-margin:default": {
                          "marginTop": "var(--sizes-size-5)",
                          "marginRight": "var(--sizes-size-5)",
                          "marginBottom": "var(--sizes-size-5)",
                          "marginLeft": "var(--sizes-size-5)"
                        }
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "flex",
                  "flex": "1 1 auto",
                  "flexGrow": 2,
                  "flexBasis": "0px",
                  "flexWrap": "nowrap",
                  "justifyContent": "flex-start",
                  "flexDirection": "column",
                  "alignItems": "center"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:dee875e38002",
                "themeCss": {
                  "baseControlClassName": {
                    "padding-and-margin:default": {
                      "paddingTop": "1.375rem",
                      "paddingRight": "1.375rem",
                      "paddingBottom": "1.375rem",
                      "paddingLeft": "1.375rem"
                    },
                    "background:default": "var(--colors-neutral-fill-11)"
                  }
                }
              },
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:e5c158e0e23c",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              }
            ],
            "style": {
              "position": "relative",
              "rowGap": "10px",
              "columnGap": "10px",
              "flexWrap": "nowrap",
              "inset": "auto",
              "overflowY": "visible",
              "height": "60%"
            },
            "id": "u:1f3e2604fa9c",
            "isFixedHeight": false,
            "isFixedWidth": false,
            "themeCss": {
              "baseControlClassName": {
                "padding-and-margin:default": {
                  "marginTop": "var(--sizes-size-6)"
                }
              }
            }
          }
        ],
        "style": {
          "height": "100vh",
          "overflow": "hidden"
        },
        "id": "u:da0a885ddb0c",
        "asideResizor": false,
        "pullRefresh": {
          "disabled": true
        },
        "themeCss": {
          "baseControlClassName": {
            "background:default": "var(--colors-neutral-fill-10)"
          }
        }      
      }
    );
  }
}

export default Card;